<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>用户管理</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- CSS Just for demo purpose, don't include it in your project -->
  <link href="${pageContext.request.contextPath}/base/merchant/css/demo.css" rel="stylesheet" />
  <link href="${pageContext.request.contextPath}/base/merchant/css/paper-bootstrap-wizard.css" rel="stylesheet" />
  <!-- Fonts and Icons -->
  <link href="${pageContext.request.contextPath}/base/merchant/css/font-awesome.css" rel="stylesheet">
  <link href='${pageContext.request.contextPath}/base/merchant/css/a67bc6e48df698badcd675d01efaf85a.css' rel='stylesheet' type='text/css'>
  <link href="${pageContext.request.contextPath}/base/merchant/css/themify-icons.css" rel="stylesheet">

</head>
<style>
  .green.btn {
    color: #FFFFFF;
    background-color: #26a69a;
  }
  .btn {
    border-width: 0;
    padding: 7px 14px;
    font-size: 14px;
    outline: none !important;
    background-image: none !important;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
  }
  .form-group{
    margin-right: -15px;
    content: " ";
    display: table;
    clear: both;
  }
  .control-label {
    text-align: right;
    min-width: 768px;
    float: left;
    font-weight: bold;
    box-sizing: border-box;
  }
  .on{
    background-color: #f5f5f5;
  }
  .modular{
    font-size: 25px;
    /*font-weight: bold;*/
    color: white;
  }
  .layui-table-page{
    height: 70px !important;
  }
  #layui-table-page1{
    height: 70px !important;
  }

  .layui-table-cell{
    display:table-cell;
    vertical-align: middle;
  }
  .collect{
    position: relative;
    height: 330px;
    margin-top: 15px;
  }
  .modleright{
    height: 335px;
    float: left;
    /*width: calc(100% - 100px);*/
    margin: 0px 15px 0 15px;
    background-color: #f6f6f6;
    position: absolute;
  }
  .name{
    height: 42px;
    background-color: white;
    text-align: center;
    line-height: 34px;
    font-size: 13px ;
    float: left;
    border: 1px solid #dddddd;
  }
  span select{
    position: relative;
    top: 11px;
  }
  .select1{
    font-size: 14px;
    border: 1px solid #dddddd;
  }
  .meter-bg{
    background-color: #f5f5f5;
  }
  .putBox{
    width: 80%;
  }
  .active>.icon-circle{
    background-color: #26a69a;
    color: white;
  }
  .layui-laypage-limits select{
    top:0px;
  }
  #menu-titile{
    position: relative;top: -15px
  }
  #wmod-div{
    height: 115px;
  }
</style>
<body>
<div class="page">
  <!-- Main Navbar-->
  <jsp:include page="header.jsp"></jsp:include>
  <div class="page-content d-flex align-items-stretch">
    <!-- Side Navbar -->
    <jsp:include page="left.jsp"></jsp:include>
    <div class="content-inner"  style="background-color: white">
      <!-- Page Header-->
      <header class="page-header">
        <div class="container-fluid">
          <h2 class="no-margin-bottom">用户管理</h2>
        </div>
      </header>
      <div class="content-box" >
        <div class="col-md-12" style="line-height: 60px;border: 1px solid #ddd;min-height: 600px">
          <div style="font-size: 16px;float: left;height: 60px">用户基本信息表</div>
          <button class=" " ></button>
          <div class="demoTable" style="float: right">
            <button class="btn green" id="add" style="margin-right: 25px;">
              <i class="fa "></i> 用户添加
            </button>
            <div class="layui-inline">
              <input class="layui-input" name="id" id="demoReload" autocomplete="off"  placeholder="输入用户手机号">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
          </div>
          <div style="height: 50px"></div>
          <!--<div class="col-md-12" style="border: 1px solid #ddd;min-height: 800px;padding: 0;margin-bottom: 15px">-->
          <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
          <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="modify" lay-event="modify" style="color: white;background-color: #ffb822;">修改</a>
            <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="oppen" lay-event="oppen" style="color: white;background-color: #20a1ff;">启用</a>
            <a class="layui-btn layui-btn-xs red"  lay-filter="user" id="del" lay-event="del" style="color: white;background-color: #ff082a;">注销</a>
          </script>
          <!--</div>-->
        </div>
      </div>
      <div id="div_step" class="" style="display:none;height: 650px !important;width: 780px !important;" >
        <!--   Big container   -->
        <div class="container" style="margin: 0px;">
          <div class="row" style="    width: 780px;height: 650px;">
            <div class="col-sm-offset-2" style="margin: 0px; left: 10px; position: relative;width: 980px;">

              <!--      Wizard container        -->
              <div class="wizard-container" style="padding: 0px; width: 780px;">
                <div class="card wizard-card" data-color="green" style="margin: 0px;box-shadow: none;border:none" >
                  <form class="form-horizontal layui-form" action="" method="">
                    <!--        You can switch " data-color="green" "  with one of the next bright colors: "blue", "azure", "orange", "red"       -->

                    <div class="wizard-navigation">
                      <div class="progress-with-circle" style="background-color: #26a69a">
                        <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 15%;"></div>
                      </div>
                      <ul>

                        <li>
                          <a id="userMesg1" class="www" href="" data-toggle="tab">
                            <div  class="icon-circle msgbox" style="border-radius: 35px !important;">
                              <i class="ti-map"></i>
                            </div>
                            基本信息
                          </a>
                        </li>
                        <li>
                          <a href="" data-toggle="tab">
                            <div class="icon-circle meterbox" style="border-radius: 35px !important;">
                              <i class="ti-direction-alt"></i>
                            </div>
                            选择表记
                          </a>
                        </li>
                        <input type="hidden"/>
                        <li>
                          <a href="" data-toggle="tab">
                            <div class="icon-circle completebox" style="border-radius: 35px !important;">
                              <i class="ti-comments"></i>
                            </div>
                            完成
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="tab-content" style="min-height: 580px;">
                      <div class="tab-pane" id="location">
                        <div class="row" style="width: 90%;position: relative;left: 15%;top: 35px;">
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px"><span style="color: red">*&nbsp;</span>姓名</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputName"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px"><span style="color: red">*&nbsp;</span>手机号</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhone"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">第二联系人</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhone2"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">第三联系人</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhone3"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">身份证号</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputIdCard"   placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">邮箱</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputMail"  placeholder=""  oninput="valueChange(this);" class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">地址</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputAddr"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tab-pane" id="type">
                        <div class="row" >
                          <div id="test7" style="position: relative;left: 3%;top: 25px;" class="demo-transfer"></div>
                        </div>
                      </div>
                      <div class="tab-pane" id="description">
                        <div class="row" style=" position: relative;top: 50px;">
                          <h2 class="info-text" style="margin-left: 310px"> 基&nbsp;本&nbsp;信&nbsp;息&nbsp;确&nbsp;认 </h2>
                          <div  style="width: 88%;position: relative;left: 6%;" class="panel-collapse  in">
                            <div class="panel-body data-box2">
                              <table  border="1" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;table-layout:fixed;">
                                <tbody>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">姓名</td>
                                  <td colspan="4" class="sureName" id="sureName"></td>
                                  <td colspan="2" class="on">手机号</td>
                                  <td colspan="4" class="phone" id="surePhone"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">第二联系人</td>
                                  <td colspan="4" class="phone2" id="surePhone2"></td>
                                  <td colspan="2" class="on">第三联系人</td>
                                  <td colspan="4" class="phone3" id="surePhone3"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">身份证</td>
                                  <td colspan="4" class="IdCard" id="sureIdCard"></td>
                                  <td colspan="2" class="on">邮箱</td>
                                  <td colspan="4" class="mail" id="sureMail"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">地址</td>
                                  <td colspan="10" class="Addr" id="sureAddr"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">表记个数</td>
                                  <td colspan="2" class="meterCount"  id="meterCount">0</td>
                                  <td colspan="2" class="on">表记ID</td>
                                  <td colspan="6" class="meterIds"  id="meterIds"></td>

                                </tr>
                                </tbody></table>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                    <div class="wizard-footer">
                      <div class="pull-right">
                        <input type='button' class='btn btn-next btn-fill btn-success btn-wd' style="border-radius: 16px;" name='next' value='下一步' />
                        <input type='button'  class='btn btn-finish btn-fill btn-success btn-wd' style="border-radius: 16px;" onclick="oppenAccount();" name='finish' value='确认开户' />
                      </div>

                      <div class="pull-left" style="background-color: gainsboro;border-radius: 16px;">
                        <input type='button' class='btn btn-previous btn-default btn-wd'  style="border-radius: 16px;"   name='previous' value='上一步' />
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </form>
                </div>
              </div> <!-- wizard container -->
            </div>
          </div> <!-- row -->
        </div> <!--  big container -->

      </div>

      <div id="div_step_modify" class="" style="display:none;height: 650px !important;width: 780px !important;" >
        <!--   Big container   -->
        <div class="container" style="margin: 0px;">
          <div class="row" style="    width: 780px;height: 650px;">
            <div class="col-sm-offset-2" style="margin: 0px; left: 10px; position: relative;width: 980px;">

              <!--      Wizard container        -->
              <div class="wizard-container" style="padding: 0px; width: 780px;">
                <div class="card wizard-card" data-color="green" style="margin: 0px;box-shadow: none;border:none" >
                  <form class="form-horizontal" action="" method="">
                    <!--        You can switch " data-color="green" "  with one of the next bright colors: "blue", "azure", "orange", "red"       -->

                    <div class="wizard-navigation">
                      <div class="progress-with-circle" style="background-color: #26a69a" >
                        <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 15%;"></div>
                      </div>
                      <ul>
                        <li>
                          <a id="userMesg2" class="www" href="" data-toggle="tab">
                            <div class="icon-circle msgbox" style="border-radius: 35px !important;">
                              <i class="ti-map"></i>
                            </div>
                            基本信息
                          </a>
                        </li>
                        <li>
                          <a href="" data-toggle="tab">
                            <div class="icon-circle meterbox" style="border-radius: 35px !important;">
                              <i class="ti-direction-alt"></i>
                            </div>
                            选择表记
                          </a>
                        </li>
                        <li>
                          <a href="" data-toggle="tab">
                            <div class="icon-circle completebox" style="border-radius: 35px !important;">
                              <i class="ti-comments"></i>
                            </div>
                            完成
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="tab-content" style="min-height: 580px;">
                      <div class="tab-pane" id="locationMod">
                        <div class="row" style="width: 90%;position: relative;left: 15%;top: 35px;">
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px"><span style="color: red">*&nbsp;</span>姓名</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputNameMod"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px"><span style="color: red">*&nbsp;</span>手机号</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhoneMod"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">第二联系人</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhone2Mod"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">第三联系人</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputPhone3Mod"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">身份证号</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputIdCardMod"   placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">邮箱</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputMailMod"  placeholder=""  oninput="valueChange(this);" class="layui-input">
                            </div>
                          </div>
                          <div class="layui-form-item putBox">
                            <label class="layui-form-label" style="width: 100px">地址</label>
                            <div class="layui-input-block">
                              <input type="text" id="inputAddrMod"  placeholder="" oninput="valueChange(this);"  class="layui-input">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="tab-pane" id="typeMod">
                        <div class="row" >
                          <div id="test6" style="position: relative;left: 3%;top: 25px;" class="demo-transfer"></div>
                        </div>
                      </div>
                      <div class="tab-pane" id="descriptionMod">
                        <div class="row" style=" position: relative;top: 50px;">
                          <h2 class="info-text" style="margin-left:310px"> 基&nbsp;本&nbsp;信&nbsp;息&nbsp;确&nbsp;认 </h2>
                          <div id="stepOne" style="width: 88%;position: relative;left: 6%;" class="panel-collapse  in">
                            <div class="panel-body data-box2">
                              <table id="print-content" border="1" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;table-layout:fixed;">
                                <tbody>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">姓名</td>
                                  <td colspan="4" class="sureName" id="sureNameMod"></td>
                                  <td colspan="2" class="on">手机号</td>
                                  <td colspan="4" class="phone" id="surePhoneMod"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">第二联系人</td>
                                  <td colspan="4" class="phone2" id="surePhone2Mod"></td>
                                  <td colspan="2" class="on">第三联系人</td>
                                  <td colspan="4" class="phone3" id="surePhone3Mod"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">身份证</td>
                                  <td colspan="4" class="IdCard" id="sureIdCardMod"></td>
                                  <td colspan="2" class="on">邮箱</td>
                                  <td colspan="4" class="mail" id="sureMailMod"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">地址</td>
                                  <td colspan="10" class="Addr" id="sureAddrMod"></td>
                                </tr>
                                <tr height="55" style="text-align: center;font-size:14px">
                                  <td colspan="2" class="on">表记个数</td>
                                  <td colspan="2" class="meterCount"  id="meterCountMod">0</td>
                                  <td colspan="2" class="on">表记ID</td>
                                  <td colspan="6" class="meterIds"  id="meterIdsMod"></td>

                                </tr>
                                </tbody></table>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                    <div class="wizard-footer">
                      <div class="pull-right">
                        <input type='button' class='btn btn-next btn-fill btn-success btn-wd' style="border-radius: 16px;" name='next' value='下一步' />
                        <input type='button'  class='btn btn-finish btn-fill btn-success btn-wd' style="border-radius: 16px; "  onclick="modifyMerchant()" name='finish' value='确认修改' />
                      </div>

                      <div class="pull-left" style="background-color: gainsboro;border-radius: 16px;">
                        <input type='button' class='btn btn-previous btn-default btn-wd'  style="border-radius: 16px;"   name='previous' value='上一步' />
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </form>
                </div>
              </div> <!-- wizard container -->
            </div>
          </div> <!-- row -->
        </div> <!--  big container -->

      </div>
      <!-- Page Footer-->
      <jsp:include page="footer.jsp"></jsp:include>
    </div>
  </div>
</div>
<script>
  $("#merchant-menu").addClass('active');
</script>
<!-- Main File-->
<!--   Core JS Files   -->
<script src="${pageContext.request.contextPath}/base/merchant/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="${pageContext.request.contextPath}/base/merchant/js/paper-bootstrap-wizard.js" type="text/javascript"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="${pageContext.request.contextPath}/base/merchant/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/merchant1.js"></script>
<script>
  layui.use('form', function(){
    var form = layui.form;

  });
</script>
</body>
</html>